<form class="form-horizontal" name="form1" ng-submit="onSubmit(form1)">
  <div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">
      <i class="fa fa-database text-warning"></i>
      {{'bucket.add'|translate}}
      <!-- 新建Bucket -->
    </h4>
  </div>
  <div class="modal-body">
    <div class="form-group" ng-class="{'has-error':!form1.name.$valid}">
      <label class="col-sm-2 control-label" for="name">
        {{'name'|translate}}:
        <a
          href=""
          uib-tooltip="{{'auth.authToken.tooltip'|translate}}"
          tooltip-append-to-body="true"
          ng-click="openURL('https://help.aliyun.com/document_detail/31827.html')"
        >
          <i class="fa fa-question-circle"></i
        ></a>
        :
        <!-- 名称: -->
      </label>
      <div class="col-sm-8">
        <input
          type="text"
          ng-model="item.name"
          id="name"
          autocomplete="off"
          autofocus
          name="name"
          required="required"
          ng-pattern="reg"
          placeholder="{{'bucket.name'|translate}}"
          class="input-md form-control"
        />
      </div>
    </div>

    <div class="form-group" ng-if="showRegion">
      <label class="col-sm-2 control-label" for="region">
        {{'region'|translate}}:
        <a
          href=""
          uib-tooltip="{{'auth.authToken.tooltip'|translate}}"
          tooltip-append-to-body="true"
          ng-click="openURL('https://help.aliyun.com/document_detail/31837.html')"
        >
          <i class="fa fa-question-circle"></i
        ></a>
        :
        <!-- 区域: -->
      </label>
      <div class="col-sm-8">
        <select
          ng-model="item.region"
          ng-options="region.id as region.label for region in regions"
          name="region"
          required="required"
          class="input-md form-control"
          ng-change="onRegionChanged()"
        ></select>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label" for="acl">
        {{'acl'|translate}}:
        <!-- 权限: -->
      </label>
      <div class="col-sm-8">
        <select
          ng-model="item.acl"
          ng-options="acl.acl as acl.label for acl in bucketACL"
          name="acl"
          required="required"
          class="input-md form-control"
          ng-change="onAclChanged()"
        ></select>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label" for="acl">
        {{'type'|translate}}
        <a
          href=""
          uib-tooltip="{{'auth.authToken.tooltip'|translate}}"
          tooltip-append-to-body="true"
          ng-click="openURL('https://help.aliyun.com/document_detail/51374.html')"
        >
          <i class="fa fa-question-circle"></i
        ></a>
        :
        <!-- 类型: -->
      </label>
      <div class="col-sm-8">
        <select
          ng-model="item.storageClass"
          ng-options="sc.value as sc.name for sc in storageClasses"
          name="storageClass"
          required="required"
          class="input-md form-control"
        ></select>
      </div>
    </div>

    <div class="clearfix"></div>
  </div>
  <div class="modal-footer">
    <button type="submit" class="btn btn-success btn-sm">
      <i class="glyphicon glyphicon-ok"></i>
      {{'ok'|translate}}
      <!-- 确定 -->
    </button>
    <button type="button" class="btn btn-default btn-sm" ng-click="cancel()">
      <i class="glyphicon glyphicon-remove"></i>
      {{'cancel'|translate}}
      <!-- 取消 -->
    </button>
  </div>
</form>
